<template>
  <div>
    <!-- <el-button @click="to">返回</el-button> -->
    <div>
      <el-page-header
        content="预约详情"
        style="padding-top: 25px; padding-left: 25px"
        @back="to"
      />
    </div>

    <div style="display: flex">
      <!-- <div style="width: 30%; height: 70vh"> -->
      <el-card class="box-card" style="width: 30%; height: 70vh">
        <div slot="header" class="clearfix">
          <span>预约详情</span>
          <el-button style="float: right; padding: 3px 0" type="text">
            就诊记录
          </el-button>
        </div>
        <!-- 用户信息 -->
        <div
          class="text item"
          style="border-bottom: 1px solid #1890ff; padding-bottom: 10px"
        >
          姓名：{{ seeList.app_customer_name }}
        </div>
        <div
          class="text item"
          style="border-bottom: 1px solid #1890ff; padding-bottom: 10px"
        >
          年龄：{{ seeList.age }}
        </div>
        <div
          class="text item"
          style="border-bottom: 1px solid #1890ff; padding-bottom: 10px"
        >
          性别：{{ seeList.gender }}
        </div>
        <div
          class="text item"
          style="border-bottom: 1px solid #1890ff; padding-bottom: 10px"
        >
          出生日期：{{ seeList.birthday }}
        </div>
        <div
          class="text item"
          style="border-bottom: 1px solid #1890ff; padding-bottom: 10px"
        >
          预约日期：{{ seeList.res_date }}
        </div>
        <div
          class="text item"
          style="border-bottom: 1px solid #1890ff; padding-bottom: 10px"
        >
          预约医生：{{ seeList.user_name }}
        </div>
        <div
          class="text item"
          style="border-bottom: 1px solid #1890ff; padding-bottom: 10px"
        >
          状态：{{ seeList.res_item_status_name }}
        </div>
      </el-card>

      <el-card
        class="box-card"
        style="width: 70%; overflow-x: hidden; overflow-y: scroll"
      >
        <div slot="header" class="clearfix">
          <span>接诊详情</span>
          <el-button style="float: right; padding: 3px 0" type="text">
            科室套餐
          </el-button>
        </div>

        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane
            v-for="ai in visit_infos"
            :key="ai.id"
            :label="ai.menu_name"
            :menu_value="ai.menu_value"
            :value="ai.menu_key"
          />
        </el-tabs>

        <div v-if="tag == 'treatment_records'">
          <Record :pdata="pdata" :see-list="seeList" />
        </div>
        <div v-if="tag == 'advice'">
          <Prescription :pdata="pdata" :see-list="seeList" />
        </div>
        <div v-if="tag == 'report'">
          <Cost :pdata="pdata" :see-list="seeList" />
        </div>
        <div v-if="activeName == 'prescript'">
          <PresMed :pdata="pdata" :see-list="seeList" />
        </div>
        <div v-if="tag == 'therapy'">
          <Auxiliary :pdata="pdata" :see-list="seeList" />
        </div>
      </el-card>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
  import { getTreatmentDetail } from '@/api/reservation'

  // import { getSchedulingLists } from '@/api/scheduling'
  // import { getUserList } from '@/api/public'

  export default {
    components: {
      Record: () => import('./record.vue'),
      Prescription: () => import('./prescription.vue'),
      Cost: () => import('./cost.vue'),
      PresMed: () => import('./presMed.vue'),
      Auxiliary: () => import('./auxiliary.vue'),
    },
    props: {
      seeList: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        activeName: '',
        tag: '',
        visit_infos: [],
        objList: {},
        resDate: [],
        pdata: {},
      }
    },
    mounted() {
      console.log(this.seeList)

      this.init()
    },

    beforeMount() {},
    methods: {
      init() {
        const data = {
          id: this.seeList.id,
          // key: 'health_record',
        }
        getTreatmentDetail(data).then((e) => {
          console.log(e)
          this.pdata = {
            menu_value: e.data.menu_info[0].menu_value,
            menu_key: e.data.menu_info[0].menu_key,
            id: this.seeList.id,
          }
          this.tag = e.data.menu_info[0].menu_key
          this.visit_infos = e.data.menu_info
          this.objList = e.data.menu_result
          this.resDate = e.data.res_date
          // menu_info
          console.log(e)
        })
      },
      to() {
        this.$emit('box')
      },
      handleClick(e) {
        this.pdata = {
          menu_value: e.$attrs.menu_value,
          menu_key: e.$attrs.value,
          id: this.seeList.id,
        }
        console.log(this.activeName)

        this.tag = e.$attrs.value
        // console.log(this.activeName)
        // console.log(e)
      },
    },
  }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
</style>
